<script setup lang="ts" name="JxtechImportExt">
import { reactive, ref, Ref, watch, nextTick } from "vue";
import { JxtechImport } from "@whjxtech/jxtech-component";
import { saveUploadFileUrl, downloadFileUrl } from "@/api/modules/org/file-attachment";
import { getAccessToken } from "@/utils/common";

const emit = defineEmits<{
  /**导入成功触发事件 */
  (e: "importSuccess", response: any, file: any, fileList: any): void;
  /**导入失败触发事件 */
  (e: "importError", err: any, file: any, fileList: any): void;
}>();

interface JxtechImportExtProps {
  /**上传文件url */
  action: string;
  /**标题 */
  importTips?: string | number;
  /**描述文本 */
  description?: string;
  /**导入文件所需的额外数据 */
  extraData?: object;
  /**警告文本 */
  alert?: string;
  /**上传文件接收的name */
  name?: string;
}

const props = withDefaults(defineProps<JxtechImportExtProps>(), {
  importTips: "上传填写好的数据表",
  description: "文件后缀名必须为xls 或xlsx(即Excel格式),文件大小不得大于10M,最多支持导入10000条数据",
  alert: "导入过程中如发现同名客户，且对该客户数据有更新权限，则更新这条客户数据",
  name: "files"
});

const JxtechImportExtState = reactive({
  /**token */
  accessToken: getAccessToken() || "",
  onImportSuccess: (response: any, file: any, fileList: any) => {
    emit("importSuccess", response, file, fileList);
  },
  onImportError: (err: any, file: any, fileList: any) => {
    emit("importError", err, file, fileList);
  }
});
</script>

<template>
  <jxtech-import
    :action="action"
    :access-token="JxtechImportExtState.accessToken"
    :import-tips="importTips"
    :description="description"
    :extra-data="extraData"
    :alert="alert"
    :name="name"
    @import-success="JxtechImportExtState.onImportSuccess"
    @import-error="JxtechImportExtState.onImportError"
  ></jxtech-import>
</template>

<style lang="scss" scoped></style>
